window.onload = function () {
  const imgContainer = document.getElementsByClassName("image-list")[0];
  var imgs = imgContainer.getElementsByTagName("img");
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  var btn = document.getElementById("btn");
  var base64Img = document.getElementById("base64Img");
  var base64 = "";
  const data = [
    {
      url: "./imgs/1.jpg",
      width: 500,
      height: 500,
    },
    {
      url: "./imgs/2.jpg",
      width: 260,
      height: 326,
    },
    {
      url: "./imgs/3.jpg",
      width: 800,
      height: 800,
    },
    {
      url: "./imgs/4.jpg",
      width: 500,
      height: 630,
    },
    {
      url: "./imgs/5.png",
      width: 500,
      height: 500,
    },
    {
      url:
        "https://cdn-oss.eclickmuse.com/creative/sync/98622cb1f097c2e0d8ee2971d5e3e0db_thumbnail.jpg",
      width: 500,
      height: 500,
    },
  ];
  const eraserWidthSelect = document.getElementById("eraserWidthSelect"),
    eraserShapeSelect = document.getElementById("eraserShapeSelect");
  let lastX, lastY;
  let mouseDown = {};
  let dragging = false;
  function drawImage(param) {
    if (param.width / param.height > 1) {
      canvas.width = 500;
      canvas.height = 500 * (param.height / param.width);
    } else {
      canvas.height = 500;
      canvas.width = 500 * (param.width / param.height);
    }
    context.clearRect(0, 0, canvas.clientWidth, canvas.height);
    var image = new Image();
    image.src = param.url;
    image.onload = function () {
      context.drawImage(image, 0, 0, canvas.width, canvas.height);
    };
  }
  function windowToCanvas(x, y) {
    var canvasBox = canvas.getBoundingClientRect();
    return {
      x: x - canvasBox.left,
      y: y - canvasBox.top,
    };
  }
  function setErasePath() {
    const eraserWidth = parseFloat(eraserWidthSelect.value);
    context.beginPath();
    if (eraserShapeSelect.value === "circle") {
      // 圆形橡皮擦
      context.arc(lastX, lastY, eraserWidth / 2, 0, 2 * Math.PI, false);
    } else {
      // 方形橡皮擦
      context.rect(
        lastX - eraserWidth / 2,
        lastY - eraserWidth / 2,
        eraserWidth,
        eraserWidth
      );
    }
    context.clip();
  }
  function eraseLast() {
    // 为什么要save  restore？
    context.save();
    setErasePath();
    // context.clearRect(0, 0, canvas.width, canvas.height);
    // context.fillStyle = "red";
    // context.fillRect(0, 0, canvas.width, canvas.height);
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.restore();
  }

  for (var i = 0; i < imgs.length; i++) {
    const img = imgs[i];
    const index = i;
    img.onclick = function () {
      drawImage(data[index]);
    };
  }

  canvas.onmousedown = function (e) {
    const loc = windowToCanvas(e.clientX, e.clientY);

    const { x, y } = loc;
    mouseDown = {
      x,
      y,
    };
    lastX = x;
    lastY = y;
    dragging = true;
  };

  canvas.onmousemove = function (e) {
    if (dragging) {
      e.preventDefault();
      const loc = windowToCanvas(e.clientX, e.clientY);
      eraseLast();
      const { x, y } = loc;
      lastX = x;
      lastY = y;
    }
  };

  canvas.onmouseup = function () {
    dragging = false;
    eraseLast();
  };
  btn.onclick = function () {
    result.innerHTML = "";
    var image = new Image(),
      url;
    image.crossOrigin = "anonymous";
    image.width = 100;
    url = canvas.toDataURL("image/png", 1);
    image.src = url;
    document.getElementById("result").appendChild(image);
  };
};
